<template>
    <div class="ejym">
			<div class="conder-1">
				<div class="crumb">
					<sapn class="tot-1">您在这里:</sapn>
					<div class="tot-2">
						<span>
							<a href="#">酒店</a>
							<i></i>
						</span>

					</div>
					<div>></div>
					<div class="tot-2">
						<span>
							<a href="#">德国酒店</a>
							<i></i>
						</span>

					</div>
					<div>></div>
					<span class="tot-4">
						<a href="#">海德堡酒店</a>
					</span>
				</div>
			</div>
			<div class="conder-2">
				<div class="indext-1">
					<input type="text" value="台北">
					<i></i>
				</div>
				<div class="indext-2">
					<div>入住日期</div>
					<i></i>
				</div>
				<div class="indext-2">
					<div>离店日期</div>
					<i></i>
				</div>
				<div class="indext-2">
					<div>2成人0儿童</div>
					<i></i>
				</div>
				<div class="indext-3">
					<a href="#">查看价格</a>
				</div>
			</div>
			<div class="san">
				<div class="quyu">区域:</div>
				<div class="shou-qi">
					<ul>
						<li><a href="#">全部</a></li>
						<li><a href="#">解放碑.洪崖洞</a></li>
						<li><a href="#">人民广场</a></li>
						<li><a href="#">重庆北站</a></li>
						<li><a href="#">杀青北地区</a></li>
						<li><a href="#">南海地区</a></li>
						<li><a href="#">石桥去地区</a></li>
						<li><a href="#">观新桥地区</a></li>
						<li><a href="#">江北地区</a></li>
						<li><a href="#">磁器口古镇</a></li>
						<li><a href="#">南山观景台</a></li>
						<li><a href="#">江北积极去</a></li>
						<li><a href="#">杨家庆步行街</a></li>
						<li><a href="#">大渡口地区</a></li>
						<li><a href="#">渝北区</a></li>
						<li><a href="#">大学城</a></li>
						<li><a href="#">武隆.仙女山</a></li>
						<li><a href="#">其他</a></li>
						<li><a href="#">渝北区</a></li>
						<li><a href="#">大学城</a></li>
						<li><a href="#">武隆.仙女山</a></li>
						<li><a href="#">其他</a></li>
						<li><a href="#">大渡口地区</a></li>
						<li><a href="#">渝北区</a></li>
						<li><a href="#">大学城</a></li>
						<li><a href="#">武隆.仙女山</a></li>
						<li><a href="#">其他</a></li>
						<li><a href="#">渝北区</a></li>
					</ul>
				</div>
				<span>
					<a href="">收起功21个区域</a>
				</span>
			</div>
			<!-- 攻略 -->
			<div class="area-wrapper">
				<div class="inte-info">攻略：</div>
				<div class="inte-list">
					<p>以“山城夜景”闻名于世。洪崖洞赏江景,八一路尝当地小吃,着迷于磁器口民乐。</p>
					<p>解放碑区域、沙坪坝区域、南岸区域是深受蜂蜂喜爱的区域。</p>
					<p>商务人士，建议住在商贸集中、交通便利的江北或高新区。</p>
				</div>
			</div>
			<!-- 均价 -->
			<div class="main">
				<div class="anim-show">
					<span>均价</span>
					<i></i>
				</div>

				<ul class="clearfix">
					<li class="hotel-rate-1">
						<p></p>
						<span>¥251</span>
					</li>
					<li class="hotel-rate-2">
						<p></p>
						<span>¥373</span>
					</li>
					<li class="hotel-rate-3">
						<p></p>
						<span>¥634</span>
					</li>
				</ul>
			</div>
			<!-- 中间内容 -->
			<div class="h-had">
				<ul>
					<li class="li-tab"><a href="#">全部</a></li>
					<li class="li-hoder"><a href="#">山城网红酒店</a></li>
					<li class="li-hoder"><a href="#">解放碑美食购物</a></li>
					<li class="li-hoder"><a href="#">吃重庆火锅</a></li>
					<li class="li-hoder"><a href="#">山城豪华之选</a></li>
					<li class="li-hoder"><a href="#">观两江美景</a></li>
					<li class="li-hoder"><a href="#">往热闹江北</a></li>
					<li class="li-hoder"><a href="#">世外桃源武隆</a></li>
				</ul>
			</div>
			
			<!-- 价格 -->
			<div class="toolbar">
				<div class="htb-iten-price">
					<div class="htb-title">
						价格
						<span>¥0 - 4000</span>

					</div>
					<div class="all">
						<span class="bg-1"></span>
						<div></div>
						<span class="bg-2"></span>
					</div>
				</div>
				
				<div class="htb-item">
					<div class="top">住宿等级</div>
					<div class="botton">
						<span>不限</span>
						<p>1</p>
					</div>
				</div>
				<div class="htb-item">
					<div class="top">住宿等级</div>
					<div class="botton">
						<span>不限</span>
						<p>1</p>
					</div>
				</div>
				<div class="htb-item">
					<div class="top">住宿等级</div>
					<div class="botton">
						<span>不限</span>
						<p>1</p>
					</div>
				</div>
				<div class="htb-item">
					<div class="top">住宿等级</div>
					<div class="botton">
						<span>不限</span>
						<p>1</p>
					</div>
				</div>
			</div>
			<div class="sortbar-info">
				<div class="hotel-sortbar">
					<div>
						<span class="sool">71</span>
						<span>家酒店</span>
					</div>
					<div>
						<span>有房</span>
						<span>1</span>
						<span>全部酒店</span>
					</div>
					<div>
						<span></span>
						<a href="#">
							<p>收藏</p>
						</a>
					</div>
					<div>
						<a href="#">1</a>
						<input type="text" placeholder="搜索关键词">
					</div>
				</div>
				<div class="j-sorter">
					<a href="#">综合排序</a>
					<a href="#">销量</a>
					<a href="#">价格
						<span>1</span>
					</a>
				</div>
			</div>
			<div style="border: 1px solid #fae8cc; border-radius: 8px; background-color: #fcf8e3; color: rgb(138, 109, 59); font-size: 16px; line-height: 1.5; padding: 8px 16px; margin-top: 16px;">
				💡各境外国家移民局陆续出台入境管理政策，请谨慎预订。如需了解详情，可关注国家移民管理局官方渠道获取更多信息。
			</div>
			<!-- body中间内容 -->
			<div class="hotel-list">
				<div><img src="../.././public/img/linxiongfeng/imgs/wKgB4lMOHiuAbOgxAAHtuJbN3jY33.jpeg" alt=""></div>
				<div class="hotel-item">
					<div>
						<h3><a href="#">首尔明洞N四个季节酒店</a></h3>
						<span>N Fourseason Hotel Myeongdong Seoul</span>
					</div>
					<div class="btn-add">
						<a href=""><i>1</i>
						<span>收藏</span></a>
					</div>
				</div>
				<div class="hotel-info">
					<ul>
						<li class="rating">
							<em>8.0</em>分
							<i>很好</i>
						</li>
						<li>
							<a href="#"><em>219条</em></a>
							<a href="#">蜂蜂评价</a>
						</li>
						<li>
							<a href="#"><em>11篇</em></a>
							<a href="#">游戏提及</a>
						</li>
					</ul>
					
				</div>
				<!-- <div>
					<i>1</i>
					<span>位于：明洞</span>
					<i>1</i>
				</div> -->
				<div></div>
			</div>
		</div>
        
</template>
<style>
 *{margin: 0;padding: 0;}
a{text-decoration: none;}
li{list-style: none;}
.ejym{width: 1000px;height: 6536px;margin: 0 auto;border: 1px solid red;}
/* 第一部 */
.codner-1{height: 30px;margin-top: 10px;}
.crumb{width: 285px;height: 25px;;display: flex;padding-top: 5px;color: #333;font-size: 12px;line-height: 20px;justify-content: space-between;}
.tot-2>span>a{color: #333;}
.tot-4>a{color: #ff8a00;}
/* 第二行 */
.conder-2{display: flex;margin-top: 15px;margin-bottom: 30px;}
.conder-2>.indext-1>input{padding-left: 10px;}
.conder-2>.indext-1{display: flex;width: 140px;;padding-left: 10;margin-right: 56px;}
.conder-2>.indext-1,.indext-2,.indext-3{border-radius: 4px;border: 1px solid #ccc;font-size:16px ;color: #666;height: 36px;line-height: 36px;}
.conder-2>.indext-2{width: 132px;margin-left: 5px;}
.conder-2>.indext-2>div{padding-left: 10px;}
.indext-3{width: 110px;height: 34px;background-color:#ffb200 ;text-align: center;line-height: 34px;margin-left: 15px;}
.indext-3>a{color:#fff}
.san{display: flex;margin-bottom: 30px;}
.quyu{width: 60px;height: 26px;;font-size: 14px;color: #666;line-height: 26px;}
.shou-qi{width: 595px;height: 112px;}
.shou-qi>ul>li{list-style: none;}
.shou-qi>ul>li>a{padding: 5px ;color: #666;font-size: 14px;float: left;}
.shou-qi>ul>li>a:hover{color: #ffa800;}
/* 攻略 */
.area-wrapper{width: 640px;height: 105px;display: flex;font-size: 14px; color: #666;margin-bottom: 20px;}
.inte-info{width: 60px;height: 26px;line-height: 26px;}
.inte-list>p{margin-bottom: 5px;}
/* 均价 */
.main{display: flex;height: 26px;color:#666 ;font-size: 14px;}
.anim-show{display: flex;width: 60px;height: 26px;}
.anim-show>i{width: 13px;height: 13px;background: url(../.././public/img/linxiongfeng/imgs/hotel-detail-icon8.png) no-repeat -135px -220px;}

.clearfix{width: 600px;height: 26px;display: flex;}
/* li标签 */
.clearfix>li{display: flex;height: 26px;line-height: 26px}
.hotel-rate-1{width: 84.36px;}
.hotel-rate-2{width: 98.36px;}
.hotel-rate-3{width: 112.36px;}
/* p标签 */
.clearfix>li>p{display: block;height: 13px;}
.clearfix>.hotel-rate-1>p{width: 43px;background: url(../.././public/img/linxiongfeng/imgs/hotel-detail-icon8.png) no-repeat -149px -229px ;}
.clearfix>.hotel-rate-2>p{width: 56px;background: url(../.././public/img/linxiongfeng/imgs/hotel-detail-icon8.png) no-repeat -164px -228px;}
.clearfix>.hotel-rate-3>p{width: 70px;background: url(../.././public/img/linxiongfeng/imgs/hotel-detail-icon8.png) no-repeat -149px -230px;}
.clearfix>li{margin-right: 40px;}
/* 全部*/
.h-had{width: 820px;height: 38px;margin-top: 15px;}
.li-tab{width: 52px;}
.li-hoder{width: 100px;}
.li-hoder>ul{justify-content: space-between;}
.h-had>ul>li{float: left;}
.h-had>ul>li>a{line-height: 38px;font-size: 14px;color: #333;display: block;background-color: #f4f4f4;border-radius: 4px;text-align: center;line-height: 38px;}
.h-had>ul>li>a:hover{background-color: red;}

/* 价格 */
.toolbar{width: 1000px;height: 71px;   padding: 7px 0;border: 1px solid #d7d7d7;float: left;display: flex;margin-bottom: 20px;}
.htb-iten-price{width: 268px;height: 66px; margin: 10px 18px;}
.htb-title{width: 268px;height: 19px;font-size: 14px;justify-content: space-between;color:#666;}
.htb-title>span{float: right;}

.all{display: flex;justify-content: space-between;margin-top: 10px;}
.all>span{width: 24px;height: 24px;}
.bg-1{background: url(../.././public/img/linxiongfeng/imgs/hotel-detail-icon8.png) no-repeat -110px -220px;}
.bg-2{background: url(../.././public/img/linxiongfeng/imgs/hotel-detail-icon8.png) no-repeat -110px -220px;}
.htb-item{width: 127px;height: 66px;border-right:1px solid #666 ;border-left:1px solid #666 ;font-size: 14px;color: #666;    padding: 10px 18px; height: 46px;}
.botton{display: flex;justify-content: space-between;margin-top: 10px;}
 
.h-had>ul{display: flex;justify-content: space-between;}
.sortbar-info{width: 1000px;height: 35px;display: flex;justify-content: space-between;color: #666666;    border-bottom: 1px solid #eaeaea;font-size: 14px;line-height: 34px;}
.sortbar-info a{color: #666666;}
.hotel-sortbar{width: 428px;justify-content: space-between;display: flex;    }
.sool{color: #ff8a00;font-size: 16px;}
/* body中间内容 */
.hotel-list{width: 1000px;height: 291px;border: 1px solid red;    margin: 25px 0;
    border-bottom: 1px solid #ececec;}
.hotel-list>div>img{width: 330px;height: 240px;float: left;}
.hotel-item{width: 650px;height: 46px;display: flex;justify-content: space-between;color: #666;float: right;}
.hotel-item>div>h3>a{color: #666;    font-weight: normal;font-size: 18px;}
.hotel-item>div>h3:hover{text-decoration: underline;}
.hotel-item>div>span{display: inline-block;font-size: 14px;color: #999;}
.btn-add>a{width: 41px;height: 16px;color: #ff8a00;}
.btn-add>a>span{font-size: 12px}
.btn-add>a>i{border: 1px solid red;width: 12px;height: 12px;}

.hotel-info>ul{width: 315px;height: 51px;margin-left: 350px;; }

.hotel-info>ul>li{float: left;}
.hotel-info>ul>.rating{width: 65px;height: 66px;border: 1px solid red;text-align: center;}
.hotel-info>ul>li>a{width: 48px;height: 31px;border: 1px solid red;display: block;margin-left: 16px;}
.hotel-info>ul>li>a>em{font-size: 14px;color: #ff8a00;font-style: normal;}
</style>